import React,{Component} from 'react';
import { Table,Divider,Button,Layout} from 'antd';
import '../style.scss';
import { connectColLeft, connectDataLeft, connectColRight, connectDataRight } from '../configData';

const connect_input_data=[
  {
    className:"input-left",
    text:"资源名称",
    placeholder:"123"
  },
  {
    className:"input-right",
    text:"资源代码",
    placeholder:"123"
  },
  {
    className:"input-left",
    text:"数据库",
    placeholder:"123"
  },
  {
    className:"input-right",
    text:"库表",
    placeholder:"123"
  },
  {
    className:"input-left",
    text:"共享方式",
    placeholder:"123"
  },
  {
    className:"input-right",
    text:"更新周期",
    placeholder:"123"
  }
];
const { Header, Content, Footer } = Layout;
class DataConnectPage extends Component{
    input_content(){
      return(
        <div className="input-wrapper">
            {
              connect_input_data.map((item,index)=>{
                return(
                  <div className={item.className} key={index}>
                    <p className='text'>{item.text}</p><input placeholder={item.placeholder}/>
                  </div>
                )
              })
            }
        </div>
      )
    }
    render(){
        return(
            <Layout className="layout">
                <Header className="header">
                    <p className="title">资源挂接</p>
                </Header>
                <Content className='content'>
                    <Divider className='divider' plain orientation="left">资源挂接</Divider>
                    {this.input_content()}
                    <Divider className='divider' plain orientation="left">数据项关联映射</Divider>
                    <div className="table-title-wrapper">
                        <div className="left">
                          <p className='text'>资源目录数据项</p>
                        </div>
                        <div className="right">
                          <p className='text'>资源登记数据项</p>
                        </div>
                    </div>
                    <Button size="small" type="primary" className='btn' style={{margin:"0 20px"}}>继续添加</Button>
                    <div className="table-wrapper-small">
                      <Table  columns={connectColLeft}
                              className="left-table"
                              pagination={{position:["bottomCenter"]}} 
                              dataSource={connectDataLeft} 
                              size="small" bordered
                              />
                      <Button  size="small" type="primary">一键匹配</Button>
                      <Table  columns={connectColRight} 
                              className="right-table"
                              pagination={{position:["bottomCenter"]}} 
                               dataSource={connectDataRight} 
                               size="small" bordered
                               />
                    </div>
                </Content>
              
            </Layout>
                
        )
    }
}

export default DataConnectPage;